<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../CSS/homePage.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
</head>
  <body>
    <div class="top">
        <div class="top">智慧社区</div>
        <div class="center">
            <div class="left">
                <i class="iconfont icon-dibiao"></i>
                首尔甜城
            </div>
            <div class="right">
                <div class="item">
                    <i class="iconfont icon-sousuo"></i>
                    搜索关键字
                </div>
            </div>
        </div>
        <div class="buttom">
            <div class="item">
                <div class="top">
                    <img src="../images/top-1.png" alt="">
                </div>
                生活社区
            </div>

               <div class="item">
                <div class="top">
                    <img src="../images/top-2.png" alt="">
                </div>
                物业报修
            </div>

               <div class="item">
                <div class="top">
                    <img src="../images/top-3.png" alt="">
                </div>
                问题反馈
            </div>

               <div class="item">
                <div class="top">
                    <img src="../images/top-4.png" alt="">
                </div>
                我要帮助
            </div>


        </div>
    </div>

    <div class="centent">
        <div class="center">
            <div class="top">
                <div class="left">
                    <img src="../images/totiao.png" alt="">
                </div>
                 <div class="cente">
                    <p>
                        关于我行对符合条条件的账户...
                    </p>
                    <i class="iconfont icon-xiaohongdian"></i>
                </div>
                 <div class="right">
                    更多
                    <i class="iconfont icon-youjiantou"></i>
                    
                </div>

            </div>
            
            <img src="../images/zhong.png" alt="">
        </div>

        <div class="livelihood">
            <div class="top">生活门店</div>
            <div class="buttom">
                <img src="../images/lift-1 (1).png" alt="">
                <img src="../images/lift-1 (2).png" alt="">
                
            </div>
        </div>
        
        <div class="information">
            <div class="top">
                <div class="left">资讯</div>
                <div class="right">
                    <i class="iconfont icon-youjiantou"></i>
                </div>
            </div>

            <div class="item">
                <div class="left">
                    <div class="top">
                    关于调整我行ATM跨行取现手续费收费标准的公示
                    </div>
                    <p>2021-07-23</p>
                </div>
                <div class="right">
                    <img src="../images/item-1.png" alt="">
                </div>
            </div>

            <div class="item">
                <div class="left">
                    <div class="top">
                        施辉:从固定成本率比较你家公司能挣钱吗?
                    </div>
                    <p>2021-11-01</p>
                </div>
                <div class="right">
                    <img src="../images/item-1.png" alt="">
                </div>
            </div>

            <div class="item">
                <div class="left">
                    <div class="top">
                    陈歆磊:从公牛电器被罚探讨转售价格限制
                    </div>
                    <p>2021-11-01</p>
                </div>
                <div class="right">
                    <img src="../images/item-1.png" alt="">
                </div>
            </div>
        </div>
   
    </div>


    <div class="wu">
          <div class="tobl">
        <div class="item">
            <div class="top">
                <img src="../images/bot-1.png" alt="">
            </div>
            <div class="buttom" style="color: blue;">主页</div>
            
        </div>

        <div class="item">
            <div class="top">
                <img src="../images/bot-2.png" alt="">
            </div>
            <div class="buttom">商店</div>
            
        </div>

          <div class="item">
            <div class="top">
                <img src="../images/bot-3.png" alt="">
            </div>
            <div class="buttom">信息</div>
            
        </div>

          <div class="item">
            <div class="top">
                <img src="../images/bot-4.png" alt="">
            </div>
            <div class="buttom">我的</div>
            
        </div>


    </div>
    </div>
  
</body>
</html>
<script type="text/javascript">
  function adapter() {
    //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
    const dpWidth = document.documentElement.clientWidth;
    //计算根字体大小
    const rootFonstSize = (dpWidth * 100) / 1125;
    //设置根字体大小
    document.documentElement.style.fontSize = rootFonstSize + "px";
  }
  adapter();
  window.onresize = adapter;
</script>
